<template>
  <div class="reataurant">
    <v-header :restInfo="restInfo"></v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link
          :to="{ path: '/restaurant/commodity', query: { restaurantId } }"
          >全部商品</router-link
        >
      </div>
      <div class="tab-item">
        <router-link
          :to="{ path: '/restaurant/comment', query: { restaurantId } }"
          >评论</router-link
        >
      </div>
      <div class="tab-item">
        <router-link
          :to="{ path: '/restaurant/seller', query: { restaurantId } }"
          >商家</router-link
        >
      </div>
    </div>
    <keep-alive>
      <router-view
        :foodInfo="foodInfo"
        :commentInfo="commentInfo"
        :restInfo="restInfo"
      ></router-view>
    </keep-alive>
  </div>
</template>

<script>
import header from "views/header/header.vue";

export default {
  name: "restaurant",
  components: {
    "v-header": header,
  },
  data() {
    return {
      // 商品信息
      foodInfo: [],
      // 店家卡片信息
      restInfo: {},
      restaurantId: "",
      // 评论信息
      commentInfo: [],
    };
  },
  mounted() {
    this.getDetailInfo();
    this.getFoodInfo();
    this.getCommentInfo();
  },
  updated() {},
  methods: {
    // 餐厅介绍
    getDetailInfo() {
      this.$axios({
        url: "/shopping/restaurant/" + this.$route.query.restaurantId,
      })
        .then((res) => {
          // console.log(res.data);
          this.restInfo = res.data;
          this.restaurantId = res.data.id;
        })
        .catch((err) => err);
    },
    // 餐厅菜品
    getFoodInfo() {
      this.$axios({
        url: "/shopping/v2/menu",
        params: {
          restaurant_id: this.$route.query.restaurantId,
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.foodInfo = res.data;
        })
        .catch((err) => err);
    },
    // 评论
    getCommentInfo() {
      // this.$axios({
      //   url: "/ugc/v2/restaurants/"+ this.$route.query.restaurantId +"/ratings",
      // })
      //   .then((res) => {
      //     console.log(res.data);
      //     // this.commentInfo = res.data;
      //   })
      //   .catch((err) => err);
      // this.$axios({
      //   url: "/ugc/v2/restaurants/"+ this.$route.query.restaurantId +"/ratings/tags",
      // })
      //   .then((res) => {
      //     console.log(res.data);
      //     // this.commentInfo = res.data;
      //   })
      //   .catch((err) => err);
      let that = this;
      Promise.all([
        this.$axios({
          url:
            "/ugc/v2/restaurants/" +
            this.$route.query.restaurantId +
            "/ratings",
        }),
        this.$axios({
          url:
            "/ugc/v2/restaurants/" +
            this.$route.query.restaurantId +
            "/ratings/tags",
        }),
      ]).then(function (values) {
        // console.log(values)
        //values为一个数组
        // console.log(values);
        //0是评价
        //1是评价分类
        that.commentInfo = values;
      });
    },
  },
};
</script>

<style scoped>
.reataurant {
  background-color: rgb(245, 245, 245);
}
.reataurant .tab {
  font-size: 14px;
  width: 100%;
  height: 30px;
  background-color: rgb(252, 252, 252);
  display: flex;
  position: relative;
  z-index: 9;
}
.reataurant .tab .tab-item {
  margin: 0 10px 0 10px;
  text-align: center;
  line-height: 25px;
}
.reataurant .tab .tab-item a {
  color: #616161;
}
.reataurant .tab .tab-item .router-link-active {
  color: black;
}
.reataurant .tab .router-link-active::after {
  display: block;
  content: "";
  width: 70%;
  height: 3px;
  background-color: #009be2;
  margin-left: 5px;
}
</style>